<template>
  <div class="nav">
    <h1>添加商品</h1>
    <el-button type="info" @click="addBatch">批量添加</el-button>
    <el-button type="info" @click="lookShoppingCart">查看购物车</el-button>
    <template>
      <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
            width="55" align="center">
        </el-table-column>
        <el-table-column
            prop="id"
            label="商品编号"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="goodsName"
            label="商品名称"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="typeName"
            label="商品分类"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="brandName"
            label="商品品牌"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="modelId"
            label="商品型号"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="colourName"
            label="商品颜色"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="goodsImg"
            label="图标" align="center">
          <template v-slot="obj">
            <img :src="obj.row.goodsImg" height="35px">
          </template>
        </el-table-column>
        <el-table-column>
          <template v-slot="obj">
            <el-button
                type="primary"
                icon="el-icon-goods"
                circle
                :disabled="isDisabled"
                @click="addGood(obj.row)" ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!--分页-->
    <div class="block">
      <el-pagination
          background
          layout="prev, pager, next"
          :total=total
          :current-page="this.searchParams.currentPage"
          :page-size="this.searchParams.pageSize"
          @current-change="currentPageChange"
          align="right">
      </el-pagination>
    </div>


    <!--模态框弹出-->
    <el-dialog title="销售订单详情" :visible.sync="dialogFormVisible" width="70%">
      <h4>订单基本资料</h4>
      <el-form :model="formData" :inline="true" label-width="80px">
        <el-form-item label="订单类型">
          <el-select placeholder="请选择" v-model="formData.orderType">
            <el-option
                v-for="(key,value) in orderTypeList"
                :key="value"
                :label="key"
                :value="value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select placeholder="请选择" v-model="formData.paymentMethodId">
            <el-option
                v-for="(key,value) in payTypeList"
                :key="key"
                :label="key"
                :value="value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务类型">
          <el-select placeholder="请选择" v-model="formData.businessType">
            <el-option
                v-for="(key,value) in businessTypeList"
                :key="value"
                :label="key"
                :value="value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单动作">
          <el-select placeholder="请选择" v-model="searchParams.orderAction">
            <el-option
                v-for="(key,value) in orderActionlist"
                :key="value"
                :label="key"
                :value="value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="购买数量">
          <el-input autocomplete="off" v-model="formData.orderProductNumber"></el-input>
        </el-form-item>
        <el-form-item label="收货人姓名" size="mini">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="formData.receiverName"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="会员账号" size="mini">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="formData.vipId"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="自提时间" size="mini">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="formData.selfMentiontime"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="联系电话" size="mini">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="formData.receiverTelephone"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="联系手机" size="mini">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="formData.receiverPhone"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="邮政编码" size="mini">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="formData.postalCode "></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="收货地址" size="mini">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="formData.receiverAdress"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="电子邮箱" size="mini">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="formData.receiverEmail"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="汇款人" size="mini">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="formData.payName"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="备注" size="mini">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="formData.receiverNotation"></el-input>
          </el-col>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini">返回</el-button>
        <el-button type="primary" @click="dialogFormVisible = false" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {findPage} from "@/api/goods/goods";
import {add, findGoodById, findOrderGoodsByBatch, GetdataDictionary} from "@/api/b2c/order";

export default {
  name: "addOrder",
  data() {
    return {
      tableData: [],
      imageUrl: '',//图片路径
      brandList: {},//品牌集合
      typeList: {},//类型集合
      colourList: {},//颜色集合
      num: 1,
      searchParams: {currentPage: 1, pageSize: 5, brandId: "", typeId: "", colourId: ""},//商品查询条件
      total: 0,
      //添加订单
      dialogFormVisible: false,
      formData : {},//添加的集合
      receiverInfo: [],
      goodList: [],
      //数据字典
      payTypeList: [],
      orderActionlist: [],
      orderTypeList: [],
      orderStatusList: [],
      businessTypeList: [],
      multipleSelection: [],
      isDisabled: false,
      //添加商品
      orderGoods: [],
      idList: {},
      goodInfo: {
        brandId: ``,
        colourId: ``,
        id: ``,
        goodsName: ``,
        typeId: ``,
        modelId: ``,
        goodPrice: ``,
        goodNumber: ``,
        goodMoney: ``
        // goodNumber:``,
        // goodMoney:``
      },
    }
  },
  methods: {
    refreshData() {
      alert('调用成功')
    },
    //购买数量加减
    handleChange(value) {
      console.log(value);
    },
    //查询所有商品
    async searchPage() {
      let response = await findPage(this.searchParams);
      this.tableData = response.data;
      this.total = response.total;
    },

    //页面变化
    currentPageChange(currentIndex) {
      this.searchParams.currentPage = currentIndex;
      this.searchPage();
    },
    //数据字典
    async querydic() {
      //1.订单动作 2 订单状态 3 业务类型 4 配送方式  5 支付方式  6订单分类订单类型 7 退货原因 ',
      let result = await GetdataDictionary();
      console.log(result)
      this.orderActionlist = result[1]
      this.orderStatusList = result[2]
      this.businessTypeList = result[3]
      this.payTypeList = result[5]
      this.orderTypeList = result[6]
      // console.log(this.orderTypeList)
    },
    //================================
    //选择该行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },
    //批量添加
    addBatch() {
      this.idList = this.multipleSelection.id
      findOrderGoodsByBatch(this.idList);

    },
    async addGood(row) {
      this.goodInfo.brandId = row.brandId;
      this.goodInfo.goodsName = row.goodsName;
      this.goodInfo.goodNumber = 1;
      this.goodInfo.goodPrice = row.salePrice;
      this.goodInfo.goodMoney = this.goodInfo.goodNumber * this.goodInfo.goodPrice
      this.goodInfo.modelId = row.modelId;
      this.goodInfo.id = row.id;
      this.goodInfo.colourId = row.colourId;
      this.goodInfo.typeId = row.typeId;
      let response = await add(this.goodInfo)
      if (response === 1) {
        this.open()
        // this.isDisabled = true;
      }
      console.log(response);
    },
    //查看购物车
    lookShoppingCart() {
      location.href = "/order/shopping"
    },
    //根据商品id查询
    async findOrderById(row) {
      await findGoodById(row.id)
    },
    open() {
      this.$message('商品已添加');
    },
    ooo(){
      this.$message("添加购物车")
    }
  },
  created() {
    this.searchPage()
    this.querydic()
  }
}
</script>

